<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书商城系统 - 用户登录</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!--  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      background: linear-gradient(135deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
    }
    .login-container {
      width: 100%;
      max-width: 450px;
      padding: 40px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }
    .login-header {
      text-align: center;
      margin-bottom: 30px;
      position: relative;
    }
    .login-header h2 {
      font-size: 28px;
      color: #1e5799;
      margin-bottom: 10px;
    }
    .login-header p {
      color: #909399;
      font-size: 16px;
    }
    .login-icon {
      font-size: 50px;
      color: #2989d8;
      margin-bottom: 15px;
    }
    .login-form {
      margin-bottom: 20px;
    }
    .form-item {
      margin-bottom: 25px;
    }
    .form-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .login-btn {
      width: 100%;
      height: 45px;
      font-size: 16px;
      letter-spacing: 2px;
    }
    .register-link {
      color: #2989d8;
      cursor: pointer;
      text-decoration: none;
    }
    .register-link:hover {
      text-decoration: underline;
    }
    .copyright {
      text-align: center;
      margin-top: 30px;
      color: #909399;
      font-size: 14px;
    }
    .login-decoration {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: linear-gradient(45deg, #1e5799, #2989d8);
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
    .login-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80px;
      height: 80px;
      background: linear-gradient(45deg, #2989d8, #1e5799);
      clip-path: polygon(0 100%, 100% 100%, 0 0);
      opacity: 0.7;
    }
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
    .logo-icon {
      font-size: 36px;
      color: #2989d8;
      margin-right: 10px;
    }
    .logo-text {
      font-size: 24px;
      font-weight: bold;
      background: linear-gradient(45deg, #1e5799, #2989d8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @media (max-width: 500px) {
      .login-container {
        width: 90%;
        padding: 30px 20px;
      }
      .login-header h2 {
        font-size: 24px;
      }
      .login-icon {
        font-size: 40px;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <div class="login-container">
    <div class="login-decoration"></div>
    <div class="login-decoration-2"></div>

    <div class="login-header">
      <div class="logo">
        <i class="el-icon-reading logo-icon"></i>
        <div class="logo-text">图书商城系统</div>
      </div>
      <i class="el-icon-user-solid login-icon"></i>
      <h2>用户登录</h2>
      <p>欢迎回来，请登录您的账号</p>
    </div>

    <div class="login-form">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <div class="form-item">
          <el-form-item prop="userName">
            <el-input
                    v-model="loginForm.userName"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    size="medium"
                    clearable>
            </el-input>
          </el-form-item>
        </div>

        <div class="form-item">
          <el-form-item prop="userPassword">
            <el-input
                    v-model="loginForm.userPassword"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    show-password
                    size="medium"
                    @keyup.enter.native="handleLogin">
            </el-input>
          </el-form-item>
        </div>

        <el-button
                type="primary"
                class="login-btn"
                :loading="loading"
                @click="handleLogin">
          {{ loading ? '登录中...' : '登 录' }}
        </el-button>

        <div class="form-footer">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          <a class="register-link" @click="goToRegister">注册新账号</a>
        </div>
      </el-form>
    </div>

    <div class="copyright">
      © 2023 图书商城系统 | 前端使用ElementUI+Axios实现
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        loginForm: {
          userName: '',
          userPassword: ''
        },
        rememberMe: false,
        loading: false,
        loginRules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          userPassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      // 检查是否有记住的账号
      const rememberedUser = localStorage.getItem('rememberedUser');
      if (rememberedUser) {
        const user = JSON.parse(rememberedUser);
        this.loginForm.userName = user.userName;
        this.loginForm.userPassword = user.userPassword;
        this.rememberMe = true;
      }
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;

            // 保存记住我选项
            if (this.rememberMe) {
              localStorage.setItem('rememberedUser', JSON.stringify(this.loginForm));
            } else {
              localStorage.removeItem('rememberedUser');
            }

            // 调用登录API
            axios.post('http://localhost:8081/user/login', this.loginForm)
                    .then(response => {
                      if (response.data.code === 200 && response.data.success) {
                        this.$message({
                          message: '登录成功！正在跳转...',
                          type: 'success',
                          duration: 1500
                        });

                        // 保存用户信息到sessionStorage
                   //     sessionStorage.setItem('userInfo', JSON.stringify(response.data.data));
                        let curUser = response.data.data;
                        //将用户的登录信息存入到前端sessionStorage中
                        window.sessionStorage.setItem("curUser",JSON.stringify(curUser));
                        // 延迟跳转，让用户看到成功消息
                        setTimeout(() => {
                          window.location.href = 'booklist.html';
                        }, 1500);
                      } else {
                        this.$message.error(response.data.message || '登录失败');
                      }
                    })
                    .catch(error => {
                      console.error('登录失败:', error);
                      let errorMsg = '登录失败，请检查网络或联系管理员';
                      if (error.response && error.response.data && error.response.data.message) {
                        errorMsg = error.response.data.message;
                      }
                      this.$message.error(errorMsg);
                    })
                    .finally(() => {
                      this.loading = false;
                    });
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      },

      goToRegister() {
        this.$message.info('注册功能暂未开放');
      }
    }
  });
</script>
</body>
</html>